<template>
  <div>
    <home-header></home-header>
    <home-swiper :list="SwiperList"></home-swiper>
    <home-ions :list="IonsList"></home-ions>
    <home-recommend :list="RecommendList"></home-recommend>
    <home-weekend :list="WeekendList"></home-weekend>
    <div>123</div>
  </div>
</template>

<script>
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
import HomeIons from "./components/Icon";
import HomeRecommend from "./components/Recommend";
import HomeWeekend from "./components/Weekend";
import HomeHotlist from "./components/Hotlist";

import axios from "axios";
import { mapState } from "vuex";

export default {
  name: "Home",
  components: {
    HomeHeader: HomeHeader,
    HomeSwiper: HomeSwiper,
    HomeIons: HomeIons,
    HomeRecommend: HomeRecommend,
    HomeWeekend: HomeWeekend,
    HomeHotlist: HomeHotlist
  },
  data() {
    return {
      lastCity: "",
      SwiperList: [],
      IonsList: [],
      RecommendList: [],
      WeekendList: []
    };
  },
  methods: {
    getHomeInfo() {
      axios.get("/api/index.json?city=" + this.city).then(this.getHomeInfoSucc);
    },
    getHomeInfoSucc(res) {
      console.log("res:", res);
      res = res.data;
      if (res.ret && res.data) {
        let data = res.data;
        this.SwiperList = data.swiperList;
        console.log("iconList:", data.iconList);
        this.IonsList = data.iconList;
        this.RecommendList = data.recommendList;
        this.WeekendList = data.weekendList;
      }
    }
  },
  computed: {
    ...mapState(["city"])
  },
  mounted() {
    this.getHomeInfo();
    this.lastCity = this.city;
  },
  activated() {
    console.log("lastCity：" + this.lastCity + "city:" + this.city);

    //这里的city是通过mapState将vux state中的city映射过来的 $store.state 。等同于 this.$store.state.city
    if (this.lastCity !== this.city) {
      this.lastCity = this.city;
      this.getHomeInfo();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
